<template>
  <div style="padding-bottom:1rem;padding-top:1.5rem;">
    <div>
      <div class="header">
        <TopNav title="DayReportPage.rjbb" show_left="true" back_url="/#/profile"></TopNav>
      </div>
      <nut-row type="flex" gutter="10" align="center">
        <nut-col :span="24" style="margin-bottom:1rem;">
          <li v-if="loading">
            <div style="text-align: center;">
              <van-loading/>
            </div>
          </li>
          <div v-if="data.length==0">
            <EmptyBox text="DayReportPage.zwjl"/>
          </div>
          <div v-else>
            <nut-row type="flex" gutter="10" align="center">
              <nut-col :span="24">
                <div class="total-box">
                  <ul>
                    <li>{{ $t('DayReportPage.zjrwsy') }}:{{total}}{{ $t('DayReportPage.y') }}</li>
                    <li>{{ $t('DayReportPage.xjrwsy') }}:{{sub_task}}{{ $t('DayReportPage.y') }}</li>
                    <li>{{ $t('DayReportPage.xjczsy') }}:{{sub_recharge}}{{ $t('DayReportPage.y') }}</li>
                    <li>{{ $t('DayReportPage.zjsy') }}:{{zhongjiang}}{{ $t('DayReportPage.y') }}</li>
                    <li style="color: #1a3bb7;font-weight: bold;">{{ $t('DayReportPage.zsy') }}:{{(zhongjiang+sub_recharge+sub_task+total).toFixed(2)}}{{ $t('DayReportPage.y') }}</li>
                  </ul>
                </div>
              </nut-col>
            </nut-row>
            <div style="overflow: hidden;height:1rem;line-height: 1rem;">
              <div class="pull-left" style="width:13%;">{{ $t('DayReportPage.sl') }}</div>
              <div class="pull-left" style="width:13%;">{{ $t('DayReportPage.rw') }}</div>
              <div class="pull-left" style="width:13%;">{{ $t('DayReportPage.xj') }}</div>
              <div class="pull-left" style="width:13%;">{{ $t('DayReportPage.lr') }}</div>
              <div class="pull-left" style="width:13%;">{{ $t('DayReportPage.qs') }}</div>
              <div class="pull-left" style="width:13%">{{ $t('DayReportPage.xf') }}</div>
              <div class="pull-left" style="width:22%;">{{ $t('DayReportPage.rq') }}</div>
            </div>
            <nut-leftslip v-for="(item, index) in data" :key="item.id" ref="leftslip">
              <div slot="slip-main" class="slip-main">
                <div style="width:13%">{{item.task_cnt}}</div>
                <div style="width:13%">{{item.task_money}}</div>
                <div style="width:13%"><b>{{item.sub_task}}</b></div>
                <div style="width:13%"><b>{{item.sub_recharge}}</b></div>
                <div style="width:13%"><b>{{item.other}}</b></div>
                <div style="width:13%"><b>{{item.costs}}</b></div>
                <div style="width:22%;">{{item.stat_date.substr(5)}}</div>
              </div>
<!--              <div slot="slipbtns" class="slipbtns"-->
<!--              ><a href="javascript:;" @click="handleClickRemove(item.id,index)">{{ $t('DayReportPage.sc') }}</a></div-->
<!--              >-->
            </nut-leftslip>
            <div class="bottom-tips">
              <div>({{ $t('DayReportPage.ytygx') }})</div>
              <div>{{ $t('DayReportPage.xxsjksrjl') }}</div>
              {{ $t('DayReportPage.gy') }}<b>{{data.length}}</b>{{ $t('DayReportPage.tjl') }}({{ $t('DayReportPage.zxszj') }}30{{ $t('DayReportPage.tjl') }})
            </div>
          </div>
        </nut-col>
      </nut-row>
    </div>
    <MainNav nav_index="4" ref="main_nav"/>
  </div>
</template>

<script>

import MainNav from "../components/MainNav";
import TopNav from "../components/TopNav";
import EmptyBox from "../components/EmptyBox";

export default {
  name: 'DayReportPage',
    components: {EmptyBox, MainNav,TopNav},
    data () {
    return {
        loading:false,
        data:[],
        total:0,
        sub_task: 0,
        sub_recharge: 0,
        zhongjiang: 0,
    }
  },
    methods:{
        shiftTab(index){

        },
        getData(){
            this.loading = true;
            this.$axios.get(this.$api_url.get_day_report).then((res)=>{
                this.data = res.data.list;
                this.total = res.data.total;
                this.sub_recharge = res.data.sub_recharge;
                this.sub_task = res.data.sub_task;
                this.zhongjiang = res.data.zhongjiang;
            }).catch((err)=>{
                this.$toast.fail(err.message)
            }).then(()=>{
                this.loading = false;
            })
        },
    },
    mounted() {
      this.getData();
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .nut-tab{
    border:none;
    padding:0;
  }
</style>
<style scoped>
  table{
    border-collapse: collapse;
    width:100%;
  }
  table td{
    border:thin solid #ccc;
    padding:0.5rem;

  }
  .tab-box{
    border:none;
    padding:0;
  }
  .bottom-tips{
  }
  .total-box{
  }
  .total-box ul{
    font-size: 0.4rem;
    border: thin dashed #ccc;
    border-radius: 0.2rem;
    padding: 0.2rem;
    margin: 0.2rem;
  }

  .header{
    background: url(/static/img/profile-bg.png);
    background-size: 100% 100%;
  }

</style>
